<template>
  <div
    style="display: flex; flex-wrap: wrap"
    :style="{ minHeight: size[1] + 'px' }"
  >
    <div v-for="(url, index) in file_list" :key="index" class="files">
      <el-image
        :style="{ width: size[0] + 'px', height: size[1] + 'px', borderRadius }"
        :src="url"
        :preview-src-list="[url]"
        v-if="preview"
      />
      <img
        v-else
        :style="{ width: size[0] + 'px', height: size[1] + 'px', borderRadius }"
        :src="url"
      />
      <div class="btns" v-if="showDel">
        <i class="el-icon-delete btn del" @click="fileRemove(index)" />
      </div>
    </div>
    <div>
      <el-upload
        v-if="file_list.length < limit && !loading"
        accept="image/*"
        :multiple="limit > 1"
        :limit="limit - file_list.length"
        list-type="picture-card"
        :http-request="uploadFiles"
        :file-list="[]"
        :style="{ width: size[0] + 'px', height: size[1] + 'px' }"
      >
        <el-button type="text" icon="el-icon-upload" />
      </el-upload>
    </div>
  </div>
</template>
<script>
import { uploadFile } from "@/api/uploadFile";
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      },
    },
    limit: {
      type: [String, Number],
      default: 1,
    },
    size: {
      type: Array,
      default: () => {
        return [160, 160];
      },
    },
    fileSize: {
      type: [String, Number],
      default: 2,
    },
    showDel: {
      type: Boolean,
      default: true,
    },
    preview: {
      type: Boolean,
      default: false,
    },
    borderRadius: {
      type: String,
      default: "5px",
    },
  },
  data() {
    return {
      file_list: [],
      loading: false,
      show: false,
      url: undefined,
    };
  },
  mounted() {
    if (this.value && this.value.length > 0) {
      this.file_list = [...this.value];
    }
  },
  watch: {
    value(list) {
      if (list && list.length > 0) {
        this.file_list = [...list];
      }
    },
  },
  methods: {
    uploadFiles({ file }) {
      this.loading = true;
      const uploadLoading = this.$loading({
        lock: true,
        text: "上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      uploadFile(file, this.fileSize)
        .then((res) => {
          uploadLoading.close();
          this.loading = false;
          let attach = res.data.data;
          this.file_list.push(attach.link);
          this.$emit("input", this.file_list);
        })
        .catch(() => {
          this.loading = false;
          uploadLoading.close();
          this.$message.error("上传失败");
        });
    },
    fileRemove(i) {
      this.file_list.splice(i, 1);
      this.$emit("input", this.file_list);
    },
  },
};
</script>
<style scoped lang="scss">
.files {
  position: relative;
  margin: 0 10px 10px 0;
  border-radius: 5px;
  flex-shrink: 1;
}
.img {
  border-radius: 5px;
  border: 1px solid #eee;
}
.btns {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 999;
  background: rgba($color: #000000, $alpha: 0.2);
  border-radius: 5px;

  .btn {
    font-size: 24px;
    margin: 10px;
    cursor: pointer;
  }
  .del {
    color: #f56c6c;
  }
}

::v-deep .el-upload--picture-card {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
